<template>
  <div class='song-ranking mt30'>
    <div class="songs-list-thead">
      <i class='fs20 songs-title'>听歌排行</i>
      <i class='songs-num fs10 fcgray ml20'>累计听歌 {{ userList.listenSongs }} 首</i>
      <div class="fr fs12">
        <a :class="{ 'active': isWeekActive,'latest-week':true }" ref='latestWeek' href="javascript:;" @click='getUserRecordList(1)'>最近一周</a>
        <a :class="{ 'active': isAllActive, 'all-week': true, 'ml10': true }" ref='allWeek' href="javascript:;" @click='getUserRecordList(0)'>所有时间</a>
      </div>
    </div>
    <el-table v-if="userRecordListData"
      @cell-mouse-enter="hoverRow"
      @cell-mouse-leave="leaveRow"
      :data="userRecordListData"
      :key='timeStamp' :show-header="false"
      stripe
      style="width: 100%; font-size: 12px;"
      :cell-class-name="songRanking">
      <!-- 序号 -->
      <el-table-column
        prop="id"
        label=""
        width="50">
      </el-table-column>
      <!-- 播放图标 -->
      <el-table-column
        label=""
        width="50">
        <template slot-scope="scope">
          <span class="play-icon disinblock cursor-pointer" title='播放'
            @click='playSong(scope.$index, scope.row)'></span>
        </template>
      </el-table-column>
      <!-- 歌曲标题 -->
      <el-table-column
        prop="name"
        label="歌曲标题"
        width="480">
        <template scope="scope">
          <span class="space-nowrap cursor-pointer" :title="scope.row.name">
            {{ scope.row.name }}
          </span>
          <span class="song-name-column">
            <ul class='icon-list mt5 fr cursor-pointer' v-show='scope.row.showBtnControl'>
              <li class='fl mr5 icon icon-add' title='添加'></li>
              <li class='fl mr5 icon icon-collect' title='收藏'></li>
              <li class='fl mr5 icon icon-share' title='分享'></li>
              <li class='fl mr5 icon icon-download' title='下载'></li>
            </ul>
            <span class='times-content' v-show='!scope.row.showBtnControl'>
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- 播放次数 -->
      <el-table-column
        prop="times"
        label="播放次数"
        width="520">
        <template scope="scope">
          <div class='score-column-con'>
            <div class="disinblock space-nowrap cursor-pointer H100pc"
              :style="{'width': scope.row.scoreWidth}"
              :title="scope.row.score">
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import store from '@/store'
export default {
    name: 'songRanking',
    props: ['userData', 'userRecordList'],
    data() {
      return {
        userList: {},
        isWeekActive: true,
        isAllActive: false,
        userRecordListData: [],
        timeStamp: '',
      }
    },
    watch: {
      userData() {
        this.userList = this.userData
      },
      userRecordList() {
        this.updateRecordData()
      }
    },
    methods: {
      songRanking(row) {
        if (row.columnIndex == 3) {
          return 'score-column'
        }
      },
      updateRecordData() {
        this.timeStamp = new Date().valueOf()
        let data = []
        if (this.userRecordList.weekData) {
          data = this.userRecordList.weekData
        } else {
          data = this.userRecordList.allData
        }
        data.map((item, i) => {
          item.song.ar.map((val) => {
            this.userRecordListData[i] = {
              id: i + 1 + '.',
              name: item.song.name + ' - ' + val.name,
              score: item.score,
              scoreWidth: item.score + '%',
              songid: item.song.id
            }
          })
          
        })
      },
      getUserRecordList(type) {
        if (type == 1) {
          // 最近一周
          this.isWeekActive = true
          this.isAllActive = false
        } else {
          this.isAllActive = true
          this.isWeekActive = false
        }
        this.$emit('getUserRecord', type)
      },
      hoverRow(row) {
        row.showBtnControl = true;
        this.$set(this.userRecordListData, row.index, row);
      },
      leaveRow(row) {
        row.showBtnControl = false;
        this.$set(this.userRecordListData, row.index, row);
      },
      playSong(index, row) {
        store.dispatch('song/judgeMusic', row.songid)
      }
    }
}
</script>

<style lang='less'>
  .song-ranking {
    width: 100%;
    .songs-list-thead {
        height: 30px;
        line-height: 30px;
        padding-bottom: 5px;
        border-bottom: 2px solid #c20c0c;
        .play-count {
          color: #c20c0c;
        }
        .latest-week {
          padding-right: 10px;
          border-right: 1px solid #b1adad;
          &.active {
            font-weight: bold;
          }
        }
        .all-week {
          &.active {
            font-weight: bold;
          }
        }
    }
    .play-icon {
      width: 17px;
      height: 17px;
      margin-top: 5px;
      background: url('../../../assets/table.png');
      background-position: 0px -103px;
      &:hover {
        background-position: 0px -128px;
      }
    }
    .song-name-column {
      .icon-list {
        height: 16px;
        .icon {
          width: 19px;
          height: 16px;
          background: url("../../../assets/table.png");
        }
        .icon-add {
          width: 17px;
          background: url("../../../assets/icon.png");
          background-position: 0px -698px;
          &:hover {
            background-position: -22px -698px;
          }
        }
        .icon-collect {
          background-position: 0px 198px;
          &:hover {
            background-position: -20px 198px;
          }
        }
        .icon-share {
          background-position: 0px 177px;
          &:hover {
            background-position: -20px 177px;
          }
        }
        .icon-download {
          background-position: -80px 198px;
          &:hover {
            background-position: -103px 198px;
          }
        }
      }
    }
    .score-column {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0!important;
      & .cell {
        padding: 0!important;
        overflow: unset;
      }
      .score-column-con {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        div {
          background-color: #4eb4f5;
          opacity: 0.1;
        }
      }
    }
    
  }
  /deep/.el-table tbody tr:hover > td {
      background-color: transparent;
    }
</style>